<%@page import="com.windfone.common.Constant"%>
<%@ page language="java" contentType="text/html; charset=utf-8"    pageEncoding="utf-8"%>

<%@ taglib uri="/WEB-INF/recommend.tld" prefix="windfone" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>風馳電訊-會員中心</title>
<%@ include file="head.jsp" %>
<%@ include file="headkey.jsp" %>
<script type="text/javascript" src="js/002.js"></script>
<script type="text/javascript" src="js/003.js"></script>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>

<link rel="stylesheet" type="text/css" href="css/index.css"/>
<link rel="stylesheet" type="text/css" href="css/header.css"/>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/mc_master.css"/>
<link rel="stylesheet" type="text/css" href="css/membercenter.css"/>

 <link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
 <script type="text/javascript" src="scripts/jquery.min.js"></script>
 <script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js"></script>
<script type="text/javascript" src="admin/resources/CJL.0.1.min.js"></script>
<script type="text/javascript" src="admin/resources/QuickUpload.js"></script>
<script type="text/javascript" src="admin/resources/ImagePreviewd.js"></script>
<script>
function previewFun(img, selection) {
    if (!selection.width || !selection.height)
        return;
    var scaleX = 100 / selection.width;
    var scaleY = 100 / selection.height;

    $('#previewResult img').css({
        width: Math.round(scaleX * 300),
        height: Math.round(scaleY * 300),
        marginLeft: -Math.round(scaleX * selection.x1),
        marginTop: -Math.round(scaleY * selection.y1)
    });

    $('#x1').val(selection.x1);
    $('#y1').val(selection.y1);
    $('#x2').val(selection.x2);
    $('#y2').val(selection.y2);
    $('#w').val(selection.width);
    $('#h').val(selection.height);    
}

$(function () {
    $('#idImg').imgAreaSelect({ aspectRatio: '1:1', handles: true,
        fadeSpeed: 200, onSelectChange: previewFun });
});
 
 /*
$(document).ready(function () { 
	
 );
 */
</script>

<!-- 
<link rel="stylesheet" type="text/css" href="css/css.css"/>
<link rel="stylesheet" type="text/css" href="css/common.css"/>
 -->
<style>

#coodoo_Header a
{
	font-size:14px;
	font-weight:bold;
	font-weight:bold;
	font-size:14px;
	color:#FFFFFF;
	text-decoration:none;
}
  
</style>
<style>
html{color:black; background:white;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,blockquote,th,td{margin:0; padding:0;}
body{font-size:12px; font-family:Arial, Helvetica, sans-serif;}
img{border:0px; vertical-align:top;}
a{font-size:12px; text-decoration:none;}
a,a:link,a:visited{color:#353535;}
a:hover{color:#fc6900;}
.margintop5{margin-top:5px;}
.floatend{clear:both; line-height:0px; height:0px; font-size:0px;}
.dl_glist{float:left; list-style-type:none; text-align:center; height:141px; padding:0 5px 5px 5px;}
.dl_glist li{word-break:bread-all;}
.dl_glist li.img{background:white;}
.dl_glist li.price{color:#009a00; font-weight:bold; font-size:13px;}
</style>
 <style type="text/css">
.perview {width:600px;background:#fff;font-size:12px; border-collapse:collapse;}
.perview td, .perview th {padding:5px;border:1px solid #ccc;}
.perview th {background-color:#f0f0f0; height:20px;}
.perview a:link, .perview a:visited, .perview a:hover, .perview a:active {color:#00F;}
.perview table{ width:100%;border-collapse:collapse;}

</style>	
</head>
<body style="background-color:#000000;"> 
<!-- style="background-color:#000000;" -->
<%@ include file="navigate.jsp" %>





<div class="mcmbox" style="background-color:#FFFFFF;width: 950px;margin:0 auto;">
	<div class="mcmheader"></div>
	<div  class="mcmleft">
			<div class="mcmlitem">
				<div class="item1"><a   class="cur" href="memberCenter.action">会员首页</a></div>
			</div>
			
	        <div class="mcmlitem">
				<div class="item5"><a   href="memberOrder.action">我的订单</a></div>
			</div>	
			<div class="mcmlitem">
				<div class="item2"><a  href="memberInfo.action">个人信息</a></div>
			</div>		
			<div class="mcmlitem">
				<div class="item3"><a  href="memberPWD.action">修改密码</a></div>
			</div>		
			<%--
			<div class="mcmlitem">
				<div class="item4"><a  href="memberMsg.action">短消息</a></div>
			</div>		
			<div class="mcmlitem">
				<div class="item10"><a href="memberComplaint.action">我的投诉</a></div>
			</div>		
			 --%>
		</div>
	<div class="mcmright">
		<div class="mcmminfo">
			<div class="tx"><a href="memberInfo.action"><img src="images/noportrait.jpg" style="border-width: 0px; height: 50px; width: 50px;"/></a></div>
			<dl class="info">
				<dd>您的账号：<s:property value="bean.loginName"/></dd>
			</dl>
			<dl class="info">
				<dd>性别：
				<s:if test="detailBean.sex == 1">男</s:if>
				<s:if test="detailBean.sex == 0">女</s:if>
				<s:if test="detailBean.sex == -1"></s:if>
				</dd>
			</dl>
			<dl class="info">
				<dd>您的等级：<span class="red">
					 <s:if test='bean.level==1'>积分会员</s:if>
					 <s:if test='bean.level==2'>VIP会员</s:if>
					 <s:if test='bean.level==0'>注册会员</s:if>
					 </span></dd>
			</dl>
			<dl class="info">
				<dd>您的积分：<span class="red">0</span></dd>
			</dl>
			<dl class="info1">
				<dd>您的邮箱：<s:property value="detailBean.email"/> </dd>
			</dl>
			<dl class="info1">
				<dd>上次登录时间： <s:date  name='detailBean.loginTime'  format="yyyy-MM-dd HH:mm:ss" /></dd>
			</dl>
			<%--
			<div class="split"></div>
			<dl class="ts">
				<dd class="t1">温馨提示：</dd>
				<dd class="t2">您有 <span class="red">0</span> 条短消息未读</dd>
				<dd class="t2">您的购物车中有 <span class="red">0</span> 件商品未结账</dd>
				<dd class="t2">消费总额为 <span class="red">0.00</span> 元</dd>
				<dd class="t3"><a href="mobileCenter.action"><img src="images/hhzx_img16.png" alt=""/></a></dd>
				<dd class="floatend"></dd>
			</dl>
			--%>
		</div>
		<div class="content">
<div id="upSave">

</div>
<div class="mcbox">
	<dl class="fieldS1">
		<dd class="tleft"></dd>
		<dd class="tbg w709"><span class="legend">基本信息</span></dd>
		<dd class="tright"></dd>
		<dd class="bg w723_p10">
			<table class="tbl1">
				<tbody><tr>
					<td class="lab">会员账号</td>
					<td>${bean.loginName }</td>
					<td class="lab">性别</td>
					<td>
						<span id="rbtnSex">
						<input id="rbtnSex_0" name="rbtnSex" value="1" checked="checked" type="radio"/>
						<label for="rbtnSex_0">男</label>
						<input id="rbtnSex_1" name="rbtnSex" value="2" type="radio"/>
						<label for="rbtnSex_1">女</label></span>
					</td>
				</tr>
				<tr>
					<td class="lab">真实姓名</td>
					<td><input name="name" maxlength="50" id="name" onkeypress='return SetEntFocus(event,"btnSave");' style="width: 100px;" type="text"/></td>
					<td class="lab">联系电话</td>
					<td>
						<input name="tbUTel1" maxlength="50" id="tbUTel1"   style="width: 50px;" type="text"/>
						<input name="tbUTel" maxlength="50" id="tbUTel"   style="width: 150px;" type="text"/>
						<input name="tbUTel2" maxlength="50" id="tbUTel2"  style="width: 50px;" type="text"/>
					</td>
				</tr>
				<tr>
					<td class="lab">手机号码</td>
					<td><input name="mobile" maxlength="50" id="mobile"  value="${detailBean.mobileNumber }" style="width: 100px;" type="text"/></td>
					<td class="lab">邮政编码</td>
					<td><input name="zipcode" maxlength="50" id="zipcode"   style="width: 100px;" type="text"/></td>
				</tr>
				<tr>
					<td class="lab">电子信箱</td>
					<td colspan="3"><input name="email" value="" maxlength="100" id="email"   style="width: 95%;" type="text"/></td>
				</tr>
				<tr>
					<td class="lab">发货地址</td>
					<td colspan="3"><textarea name="tbUAddr" rows="3" cols="20" id="tbUAddr"   style="width: 95%;"></textarea></td>
				</tr>
			</tbody></table>
			<div class="sub"><input name="btnSave" id="btnSave" src="images/memc_img2.png" style="border-width: 0px;" type="image"/></div>
		</dd>
	</dl>
</div>
<div class="mcbox">
	<dl class="fieldS1">
		<dd class="tleft"></dd>
		<dd class="tbg w709"><span class="legend">我的头像</span></dd>
		<dd class="tright"></dd>
		<dd class="bg w723_p10">
		 
				<div class="img">
				<form action="portraitUpload.action" method="post"  multipart/form-data>
					  <input type="hidden" name="x1" value="" />
					  <input type="hidden" name="y1" value="" />
					  <input type="hidden" name="x2" value="" />
					  <input type="hidden" name="y2" value="" />
  

				 <table border="0" class="perview">
						<tr>
							<td align="center"><img id="idImg"/></td>
						</tr>
						<tr>
							<td>
								 <div id="previewResult" style="width: 100px; height: 100px; overflow: hidden;">
    									 <img  name="previewResultImg" id="previewResultImg" src="images/noportrait.jpg" style="width: 100px; height: 100px;" />
   								</div>
							</td>
						</tr>
						<tr>
							<td height="10">
								<input id="file" name="file" type="file" value="选择图片" /> &nbsp;&nbsp;<input type="button" onclick="" value="上传图片"/>
								<input type="submit" name="submit" value="Submit" />
								 
							</td> 
						</tr>
				</table>
				</form>
				</div>
			<div class="floatend"></div>
		</dd>
	</dl>
</div>
</div>
	</div>
	<div class="floatend"></div>
<%@ include file="bottom.jsp" %>
</div>

<div style="width:950px;height: 15">&nbsp;</div>
<script>

var ip = new ImagePreview( $$("file"), $$("idImg"), {
	maxWidth: 400, maxHeight: 300
});
var ip2 = new ImagePreview( $$("file"), $$("previewResultImg"), {
	maxWidth: 100, maxHeight: 100
});
ip.img.src = ImagePreview.TRANSPARENT;
ip2.img.src = ImagePreview.TRANSPARENT;
ip.file.onchange = function(){ 
	ip.preview();
	ip2.preview();
};
</script>

</body>
</html>
